<template>
  <div class="theme-box">
    <div class="theme-color-block">
      <el-color-picker v-model="themeColor" @change="changeTheme"/>
    </div>
    <el-button type="primary" color="#0064C8" @click="recoverDefault" style="margin-left: 30px;color: #fff;">默认</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { editTheme } from '@ruifox-cms/utils'
// document.documentElement 是全局变量时
const el = document.documentElement
const themeColor = ref(getComputedStyle(el).getPropertyValue(`--el-color-primary`))

const changeTheme = () => {
  if(process.env.NODE_ENV === 'development') console.log(themeColor.value)
  editTheme(themeColor.value)
}

const recoverDefault = () => {
  themeColor.value = "#0064C8"
  editTheme("#0064C8")
}
</script>

<style lang="scss" scoped>
.theme-box{
  display: flex;
  .theme-color-block{
    span{
      font-size: 14px;
    }
    ::v-deep(.el-color-picker__trigger){
      width: 85px;
    }
  }
}

</style>
